<template>
    <div style="padding-bottom: 48px;">
        <div class="table-container">
            <el-table
                ref="tableRef"
                :data="list"
                style="width: 100%"
                v-loading="listLoading"
                border
            >
                <el-table-column label="商品" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-image
                                :src="scope.row.goods.coverUrl"
                                fit="fill"
                                style="width: 30px;height:30px"
                            ></el-image>
                            <span>{{ scope.row.goods.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="其他分组" align="center">
                    <template slot-scope="scope">
                        <ul class="otherlist-container">
                            <li
                                class="otherlist-item"
                                v-for="(item, index) in scope.row.otherList"
                                :key="index"
                            >
                                {{ item }}
                            </li>
                        </ul>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="danger"
                            size="mini"
                            v-if="scope.row.otherList.length > 0"
                            @click="
                                onDeleteGoodFromCategory(
                                    scope.row.goods.goodsId,
                                    scope.row.goods.categoryId
                                )
                            "
                        >
                            从分组中删除</el-button
                        >
                        <span v-else>无</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :page-size="listQuery.pageSize"
                :page-sizes="[5, 10, 15]"
                :current-page.sync="listQuery.pageNum"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getGoodsSmallCountList, deleteGoodFromCategory } from '@/api/goodsCategory';
const defaultListQuery = {
    keyword: null,
    pageNum: 1,
    pageSize: 5,
    categoryId: null
};

export default {
    props: {
        categoryId: {
            type: [Number, Object, String],
            default: null
        }
    },
    data() {
        return {
            listLoading: false,
            listQuery: Object.assign({}, defaultListQuery),
            list: [],
            total: 0
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.listLoading = true;
            getGoodsSmallCountList(this.categoryId, this.listQuery).then(res => {
                this.listLoading = false;
                if (res.data.success && Array.isArray(res.data.data)) {
                    this.list = res.data.data;
                    this.total = res.data.extra.total;
                } else {
                    this.list = [];
                }
            });
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        onDeleteGoodFromCategory(goodsId, categoryId) {
            deleteGoodFromCategory(goodsId, categoryId).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '删除成功!',
                        type: 'success',
                        duration: 1000
                    });
                    this.getList();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.otherlist-container {
    list-style: none;
    margin: 0;
    padding: 0;
    .otherlist-item {
    }
}
</style>
